<template>
  <el-container>
    <el-header>
      <!--头部-->
      <Header></Header>
    </el-header>
    <br>
    <el-main>
      <!--搜索-->
     <!-- <Search></Search>-->
      <el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
        <el-step title="查看购物车" ></el-step>
        <el-step title="确认订单信息" ></el-step>
        <el-step title="成功提交订单" ></el-step>
      </el-steps>
      <br>
      <h1>购物车列表</h1>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="图片" style="width:50px">
          <template slot-scope="scope">
            <img :src="require('../../assets/images/'+scope.row.src)" width="50px" height="50px">
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="goodsName" style="width: 40%"></el-table-column>
        <el-table-column label="单价" prop="price" width="100px"></el-table-column>
        <el-table-column label="购买数量" width="300px">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.num" :min="1" @change="count"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="小计"  width="200px">
          <template slot-scope="scope">
            <span>{{scope.row.price*scope.row.num}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div align="right" style="padding-top: 5px">
          <el-tag  type="primary">商品总价:{{totalPrice}}</el-tag>
          <el-button type="primary" size="small">继续购物</el-button>
          <el-button type="primary" size="small" @click="toBuyCartwo">确认结算</el-button>
      </div>
    </el-main>
    <Footer></Footer>
  </el-container>
</template>

<script>
  import Header from "./myComponents/Header";
  import Search from "./myComponents/Search";
  import Footer from "./myComponents/Footer";
  export default {
    name: "buyCar",
    components:{
      Header,
      Search,
      Footer
    },
    data(){
      return{
        order:{//订单参数对象
          ids:[],//商品在购物车里的id集合
          userId:"",//用户id
          orderMoney:"",//订单金额

        },
        tableData:[],
        totalPrice:0//商品总价
      }
    },
    methods:{
      toBuyCartwo(){//结算
        //设置订单参数对象
        this.order.ids=[];
        for(var i =0;i< this.tableData.length;i++){
            this.order.ids.push(this.tableData[i].id)
        }

        this.order.userId = 1;
        this.order.orderMoney = this.totalPrice;
        console.log(this.order);
        const self = this;
        //发送ajax请求
        const http = self.$http.post("/order-info/addOrder",this.order);
        //成功回调
        http.then(function (rs) {

          if(rs.data.code==200){
            self.$router.push({"name":"buyCarTwo",query:{"totalPrice":self.totalPrice,"orderId":rs.data.data}});
          }else{
            self.$message(rs.data.msg);
          }
        });
        http.catch(function () {
          self.$message("服务器异常，请检查地址或者服务器是否启动");
        })

      },
      count(){ //计算总价
        //初始化总价
        this.totalPrice = 0;
        for(var i=0;i<this.tableData.length;i++){
          this.totalPrice += this.tableData[i].price*this.tableData[i].num
        }
      },
      handleDelete(index,row){//删除购物车
        const self = this;
        this.$confirm("你确定要删除吗").then(function (rs) {
          //发送ajax请求
          const http = self.$http.delete("/car/delCar",{params:{"id":row.id}});
          //成功回调
          http.then(function (rs) {
            console.log(rs.data);
            if(rs.data.code==200){
              self.tableData.splice(index,1);
              //计算总金额
              self.count();
            }else{
              self.$message(rs.data.msg);
            }
          });
          http.catch(function () {
            self.$message("服务器异常，请检查地址或者服务器是否启动");
          })
        })

      },
      queryCar(){//查询我的购物车
        //获取用户id
        const userId=1;
        const self = this;
        //发送ajax请求
        const http = this.$http.get("/car/queryCar",{params:{"userId":userId}});
        //成功回调
        http.then(function (rs) {
          console.log(rs.data);
          if(rs.data.code==200){
           self.tableData = rs.data.data;
            //计算总金额
            self.count();
          }else{
            self.$message(rs.data.msg);
          }
        });
        http.catch(function () {
          self.$alert("服务器异常，请检查地址或者服务器是否启动");
        })

      }

    },
    created() {
      this.queryCar();


    }

  }
</script>

<style scoped>

</style>
